<template>
  <div class="container">
    <button @click="print">打印pdf</button>
    <button @click="downloadPdf">下载pdf</button>
    <button @click="downloadExcel">下载Excel</button>
  </div>
</template>

<script>
import { base64ToPdfDownload } from "@/utils/utils";
export default {
  methods: {
    downloadPdf() {
      // vue-cli的public/static目录本地服务器可以直接访问
      this.$http({
        method: "get",
        url: "/static/base64pdf.json"
      }).then(e => {
        // 后台返回pdf的base64文件流
        base64ToPdfDownload(e.data.data, "房屋出租委托书.pdf");
      });
      // const { data } = require("@/data/base64pdf.json");
      // base64ToPdfDownload(data, "房屋出租委托书.pdf");
    },
    print() {
      // 后台返回服务器文件地址
      window.open("/static/房屋出租委托书.pdf");
    },
    downloadExcel() {
      this.$http({
        method: "get",
        url: "/static/excel.json",
        responseType: "blob",
        headers: { "Content-Type": "application/json" }
      }).then(e => {
        // 此处本地模拟后台有问题，此处不能返回application/vnd.ms-excel的data数据，所以excel文件有问题；但方法没错
        let url = window.URL.createObjectURL(new Blob([e.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "资源统计1.xlsx");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
  }
};
</script>

<style scoped>
.container {
  width: 500px;
  margin: auto;
}
</style>
